 
<!DOCTYPE html>
<html>
<head>
    <title>Contract Message</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@1.3.5/dist/web3.min.js"></script>
    <script>
        window.addEventListener('load', async () => {
            if (typeof window.ethereum !== 'undefined') {
                await window.ethereum.enable();
                const web3 = new Web3(window.ethereum);
                const contractAddress = '0x0E044Be257e752d6250d27838a7007e76eA0d8C6';
                const contractABI = [
	{
		"inputs": [
			{
				"internalType": "string",
				"name": "initMessage",
				"type": "string"
			}
		],
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"inputs": [
			{
				"internalType": "string",
				"name": "newMessage",
				"type": "string"
			}
		],
		"name": "updateMessage",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "message",
		"outputs": [
			{
				"internalType": "string",
				"name": "",
				"type": "string"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
];
                const contract = new web3.eth.Contract(contractABI, contractAddress);
                const messageElement = document.getElementById('message');
                const updateButton = document.getElementById('update-button');
                const messageInput = document.getElementById('message-input');
                const account = await web3.eth.getAccounts();
                const accountAddress = account[0];

                const updateMessage = async () => {
                    const newMessage = messageInput.value;
                    await contract.methods.updateMessage(newMessage).send({ from: accountAddress });
                    const message = await contract.methods.message().call();
                    messageElement.innerHTML = message;
                };

                updateButton.addEventListener('click', updateMessage);

                const message = await contract.methods.message().call();
                messageElement.innerHTML = message;
            } else {
                console.log('Please install MetaMask!');
            }
        });
    </script>
</head>
<body>
    <h1>Contract Message</h1>
    <p>Current message: <span id="message"></span></p>
    <label for="message-input">New message:</label>
    <input type="text" id="message-input">
    <button id="update-button">Update</button>
</body>
</html>
